<template>
  <div>
      <div class="status-box">
          <div class="statusPos">
              <span class="onlyRead"></span><span class="status">只可读</span>
          </div>
          <div class="statusPos">
              <span class="haveRead"></span><span class="status">已反馈</span>
          </div>
          <div class="statusPos">
              <span class="noRead"></span><span class="status">未反馈</span>
          </div>
      </div>
    <el-card shadow="hover" :body-style="{padding: '0px'}">
      <div class="card-box clearfix">
        <i class="box-title-icon fontColor" :class="content.icon"></i>
        <template>
          <el-tabs v-model="activeNameNews" @tab-click="handleNewsClick">
            <el-tab-pane :label="content.name" name="first">
              <div class="tabs-content-box">
                <el-table :data="statusList" :show-header="false" style="width: 100%;font-size:14px;">
                  <el-table-column width="40">
                    <template slot-scope="scope">
                      <div class="todo-tag" v-bind:class="{'activeNoRead':((scope.row.typeId==='30021') && Number(scope.row.deptFeedState) === 1),'activeHaveRead':((scope.row.typeId==='30021') && Number(scope.row.deptFeedState) === 0)}">{{scope.$index+1}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column>
                    <template slot-scope="scope">
                        <div class="todo-item">
                            <a href="#" title=""  @click="openMenuFunction(scope.row)">{{scope.row.name}}</a>
                        </div>
                    </template>
                  </el-table-column>
                  <!--<el-table-column width="80">
                    <template slot-scope="scope">
                      <div class="todo-name">{{scope.row.name}}</div>
                    </template>
                  </el-table-column>-->
                  <el-table-column width="105">
                    <template slot-scope="scope">
                      <div class="todo-date">{{scope.row.publishTime}}</div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
          </el-tabs>
        </template>
        <el-button class="btn-more" type="text">
            <a class="fontColor" title="" @click="handleNewsMore"  href="#">MORE</a>
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { noticeStatusContent } from './data/Content.js';
import appUtil from '~/assets/utils/appUtil.js';
import bus from '../../common/bus';

import { createNamespacedHelpers } from 'vuex';
const { mapState:tagState,  } = createNamespacedHelpers('tagModule');
export default {
    name: 'ArticleStatus',
    props: ['content'],
    data() {
        return {
            activeNameNews: 'first',
            ops: {
                rail: {
                    opacity: '0',
                    //size: '10px'
                },
                bar: {
                    onlyShowBarOnScroll: false,
                    background: '#909399',
                    size: '10px',
                },
            },
            statusList:[],
            articleDetail: './articleDetail.html',
            noticeStatusContent:noticeStatusContent,
            config:{}
        };
    },
    computed: {
        ...tagState({
            activeTag:state => state.activeTag,
        }),
    },
    watch:{
        activeTag(){
            if(this.activeTag.url==='index'){
                this.getInit(this.config);
            }
        }
    },
    created(){
        this.$axios.get(noticeStatusContent.contentUrl).then((res) => {
            this.getInit(res.data[0]);
            this.config=res.data[0];
        });
    },
    methods: {
        getInit(param){
            let data = {
                categoryId:param.categoryId ? param.categoryId : '',
                userId:appUtil.getSes('userId'),
                deptCodes:[appUtil.getLocal('orgCode')],
                roleIds:typeof(appUtil.getSes('roleIds')) === 'object'?appUtil.getSes('roleIds') : [appUtil.getSes('roleIds')],
                status:'1',
                ps:10,
                pn:1,
                frontId:1 // 失效实际限制
            };
            //this.$axios.get('/ptp-cms/cmscontent/getContentByUserIdDeptCode',{params:data})
            this.$axios.get('/ptp-cms/cmscontent/getContentByUserIdDeptCode?userId='+data.userId+'&deptCodes='+data.deptCodes+'&categoryId='+data.categoryId+'&roleIds='+data.roleIds+'&status=1&ps=10&pn=1',)
                .then(res => {
                    this.statusList = res.data.data.dataList;
                    
                });
        },
        // 打开详情页面
        openMenuFunction(item){
            if(item.typeId ==='30021'){
                let routeData = this.$router.resolve({
                    path: '/FeedbackDetail',
                });
                // let url = window.location.href.split('#')[0]+routeData.href+'?typeId=' + item.typeId + '&articleId='+ item.id;
                // window.open(url, '_blank');
                let menu = {
                    url:window.location.href.split('#')[0]+routeData.href+'?typeId=' + item.typeId + '&articleId='+ item.id,
                    name:'通知公告',
                    isNew:false // 是否在新页面打开
                }; 
                bus.$emit('openMenu',menu);
            }else{
                // let url = this.articleDetail+'?typeId=' + item.typeId + '&articleId='+ item.id;
                // window.open(url, '_blank');
                let menu = {
                    url:this.articleDetail+'?typeId=' + item.typeId + '&articleId='+ item.id,
                    name:'通知公告',
                    isNew:false // 是否在新页面打开
                }; 
                bus.$emit('openMenu',menu);
            }  
        },
        handleNewsClick(tab, event) {
            console.log(tab, event);
        },
        // 打开更多页面
        handleNewsMore(){
            let routeData = this.$router.resolve({
                path: '/ArticleStatusMore',
                query: { categoryId:this.config.categoryId,name:this.content.name }
            });
            let menu = {
                url:routeData.href,
                name:this.content.name,
            };
            bus.$emit('openMenu',menu);//页签弹出
            //window.open(routeData.href, '_blank');//新窗口弹出
        }
    }
};
</script>

<style>
  .activeNoRead{
    background:#64d572 !important;
  }
  .activeHaveRead{
    background:#f25e43 !important;
  }
  .portlet {
    width: 100%;
    height: 100%;
    overflow: auto;
  }

  .box-title-icon{
    font-size: 10px;
  }
  .statusPos{
    float:left;
    margin-right:10px;
    position:relative;
    width:60px;
  }
  .status{
    display:inline-block;
    margin-left:14px;
  }
  .status-box{
    position:absolute;
    top:14px;
    right:30%;
    font-size:12px;
    font-weight:400;
  }
  .onlyRead{
    background:#a7a7a7;
    width:12px;
    height:12px;
    border-radius:4px;
    position:absolute;
    top:3px;
    left:0px;
    
  }
  .haveRead{
    background:#64d572;
    width:12px;
    height:12px;
    border-radius:4px;
    position:absolute;
    top:3px;
    left:0px;
  }
  .noRead{
    background:#f25e43;
    width:12px;
    height:12px;
    border-radius:4px;
    position:absolute;
    top:3px;
    left:0px;
  }
 
</style>